<template>
	<view style="background-color:#F7F7F7 ;">
		<z-paging ref="paging" class="device-list" v-model="datalist" @query="getOrderList" default-page-size="20"
			:auto="false">
			<template #top>
				<view class="top-box">
					<view class="input-search">
						<input type="text" placeholder="输入订单号" v-model="keywords" />
						<image src="../../static/images/home/切片@2x.png" @click="refreshList"></image>
					</view>
					<view class="select-box">
						<view class="select-flex-range">
							<uni-datetime-picker v-model="times" type="daterange" @change="chooseTime" />
						</view>
					</view>
				</view>
			</template>
			<view class="device-list-box">
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
					<view class="item-top">
						<view class="item-top-left">
							{{ item.order_code }}
						</view>
						<view class="item-top-right">
							<text>
								￥{{ item.amount }}
							</text>
						</view>
					</view>
					<view class="deviceContent">
						<image :src="item.avatar ? item.avatar : '/static/images/logo.png'" mode="widthFix">
						</image>
						<view class="item-info">
							<view class="t0">用户ID：{{ item.user_id }}</view>
							<!-- <view class="t0">所属代理商：{{ item.ground.city }}</view> -->
							<view class="t0">支付类型:
								<text v-if="item.type=='1'">VIP充值 获取收益{{item.divide_amount}}元</text>
								<text v-if="item.type=='2'">购买钻石 </text>
							</view>
							<view class="t0">支付方式：{{item.pay_way}}
							</view>
						</view>
					</view>
					<view class="deviceBottom">
						<view class="bottom-left">
							订单时间：{{ item.createtime }}
						</view>
					</view>
					<!-- 	<view class="btns">
						<button class="btn-yellow" @click="refund(item)">退款</button>
					</view> -->
				</view>
			</view>
		</z-paging>
		<view class="device-start" v-if="ishowBack">
			<view class="start-box">
				<view class="t0">订单退款</view>
				<uni-forms :model="order" label-width="90px">
					<uni-forms-item label="订单编号" name="order_id">{{ order.order_id }}</uni-forms-item>
					<uni-forms-item label="退款金额" required name="pice">
						<uni-easyinput v-model="order.price" placeholder="请输入退款金额" />
					</uni-forms-item>
				</uni-forms>
				<button size="mini" @click="submitRefund" class="btn">提交</button>
			</view>
			<view class="close" @click="ishowBack= false">
				<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				ishowBack: false,
				keywords: '',
				datalist: [],
				params: {
					startTime: null,
					endTime: null
				},
				times: [],

				order: {},

			};
		},
		onLoad(options) {
			if (options && options.type == 'today') {
				this.times[0] = this.getCurrentDate()
				this.times[1] = this.getCurrentDate()
				this.params.start_time = this.times[0];
				this.params.end_time = this.times[1];
			}
			this.getOrderList();
		},
		methods: {
			getCurrentDate() {
				// 创建一个新的 Date 对象，表示当前日期和时间
				const currentDate = new Date();

				// 获取当前年份
				const year = currentDate.getFullYear();

				// 获取当前月份（0-11），加1后转换为字符串，如果长度小于2则前面补0
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');

				// 获取当前日期（1-31），转换为字符串，如果长度小于2则前面补0
				const day = String(currentDate.getDate()).padStart(2, '0');

				// 拼接成“YYYY-MM-DD”格式的字符串
				const formattedDate = `${year}-${month}-${day}`;

				// 返回格式化后的日期字符串
				return formattedDate;
			},
			getOrderList(pageNo, pageSize) {
				this.params.page = pageNo
				this.params.limit = pageSize
				this.params.order_code = this.keywords
				api.getAgentOrder(this.params).then(res => {
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.scrollToTop(false)
					this.$refs.paging.refresh();
				}
			},
			chooseTime(e) {
				this.times = e
				if (this.times && this.times.length) {
					this.params.start_time = this.times[0];
					this.params.end_time = this.times[1];
				} else {
					this.params.start_time = null;
					this.params.end_time = null;
				}
				this.$refs.paging.refresh();
			},
			refund(order) {
				let that = this
				uni.showModal({
					title: "提示",
					content: "是否提交退款申请?",
					success(res) {
						if (res.confirm) {
							that.order.order_id = order.id;
							that.order.price = order.amount
							that.submitRefund()
						}
					}
				})
			},
			submitRefund() {
				api.refindOrder(this.order).then(res => {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
					this.refreshList()
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-select__input-box {
		.uni-select__input-placeholder {
			color: #ffffff !important;
			font-size: 28rpx;
		}

		.uni-select__input-text {
			color: #ffffff !important;
			font-size: 28rpx;
		}

		.uniui-bottom::before {
			color: #ffffff;
		}
	}

	.device-list {
		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding: 28rpx;

		.top-box {
			.input-search {
				position: relative;

				uni-input {
					background: #ffffff;
					box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
					border-radius: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #7d8592;
					padding: 24rpx 40rpx;
					font-style: normal;
				}

				uni-image {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 24rpx;
					top: 20rpx;
				}
			}

			.select-box {
				display: flex;
				margin: 30rpx 0 20rpx;

				.select-flex {
					flex: 1;
					margin-left: 20rpx;

					&:last-child {
						margin-right: 0;
					}
				}

				.select-flex-range {
					flex: 1;

					.uni-date-x {
						.uni-date__x-input {
							font-size: 28rpx !important;
						}
					}
				}
			}
		}

		.device-list-box {
			.device-list-item {
				background: url('../../static/images/home/编组 3备份 2@2x.png') no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 28rpx;
				border-radius: 28rpx;
				position: relative;
				margin: 0 -20rpx 20rpx;

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-top-left {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: right;
						font-style: normal;
						display: flex;
						align-items: center;

						uni-text {
							background: #49a1fd;
							border-radius: 4rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #ffffff;
							line-height: 32rpx;
							text-align: right;
							font-style: normal;
							padding: 0 6rpx;
							margin-left: 18rpx;
						}
					}

					.item-top-right {
						display: flex;
						align-items: center;

						.icon-power {
							width: 50rpx;
							height: 28rpx;
						}

						.icon-tip {
							width: 28rpx;
							height: 28rpx;
						}

						uni-text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #25ab64;
							line-height: 40rpx;
							font-style: normal;
							margin: 0 12rpx;
						}
					}
				}

				.deviceContent {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					uni-image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
					}

					.item-info {
						.t0 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #413100;
							line-height: 40rpx;
							font-style: normal;
						}

						.t1 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}

						.t2 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}
					}
				}

				.deviceBottom {
					// border-bottom: 2rpx solid rgba(73, 161, 253, 0.2);
					padding-bottom: 16rpx;
					padding-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bottom-left {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}

					.bottom-right {
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
						box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
						border-radius: 44rpx;
						padding: 4rpx 16rpx;

						uni-image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 6rpx;
						}

						uni-text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #ffffff;
							line-height: 36rpx;
							font-style: normal;
						}
					}
				}

				.btns {
					display: flex;
					justify-content: end;
					margin-top: 20rpx;

					uni-button {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 40rpx;
						font-style: normal;
						padding: 8rpx;
						border-radius: 8rpx;
						margin: 0 0 0 20rpx;

						&.btn-blue {
							background: #49a1fd;
						}

						&.btn-green {
							background: #25ab64;
						}

						&.btn-yellow {
							background: #ff950a;
						}

						&.btn-red {
							background: #f95452;
						}
					}
				}
			}

			.more-tip {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.empty-box {
			margin: 0 -20rpx;
			text-align: center;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			padding: 200rpx 0 160rpx;
			background-size: 100% 100%;

			uni-image {
				width: 400rpx;
				height: 340rpx;
			}

			uni-text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				font-style: normal;
				margin-top: 50rpx;
				display: block;
			}
		}
	}

	.device-start {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.start-box {
			background: url('../../static/images/home/编组 19@2x.png') no-repeat;
			background-size: 100% 100%;
			margin: 50% 84rpx 3%;
			text-align: center;
			padding-bottom: 20rpx;

			.t0 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				line-height: 48rpx;
				font-style: normal;
				padding-top: 10rpx;
			}

			.uni-forms {
				padding: 60rpx 40rpx 30rpx !important;

				.uni-forms-item {
					align-items: center !important;
					margin-bottom: 16rpx !important;

					.uni-forms-item__label {
						font-size: 28rpx !important;
						color: #000000 !important;
						width: 160rpx !important;
						padding-right: 0 !important;
					}
				}
			}

			.btn {
				background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
				box-shadow: 0rpx 4rpx 2rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 22px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				width: 300rpx;
				line-height: 80rpx;
				margin: 0 auto;
			}
		}

		.close {
			margin: 0 auto;
			text-align: center;
			cursor: pointer;

			uni-image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
</style>